
<template>
  <div class="onershipDiv">
    <h3 class="title">{{ mdmc }}</h3>
    <a-transfer
      :dataSource="dataSource"
      :titles="['未归属房源', '已归属房源']"
      :listStyle="{
        width: '418px',
        height: '400px',
      }"
      :targetKeys="yesListId"
      @change="handleChange"
      :render="renderItem"
    >
    </a-transfer>
  </div>
</template>
<script>
import { getHouseAttribution, saveHouseAttribution } from '@/api/store'
import { mapGetters } from 'vuex'
export default {
  name: 'HousingOwnership',
  props: {
    storesId: {
      type: Number,
      default: 0
    },
    mdmc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dataSource: [], // 数据源包含noList、yesList
      noListId: [], // 未归属信息id
      yesListId: [], // 归属信息id,
      filterNoListId: [] // 最终提交的未归属房源(以前不是未归属的)
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created () {
    getHouseAttribution({ hoperatorId: this.userInfo.id, storesId: this.storesId }).then((res) => {
      // 初始化归属id
      const yesListId = []
      // 未归属id
      const noListId = []
      // 过滤未归属数据
      const noList = res.data.noList.map((item, index) => {
        item.key = String(item.title)
        item.title = String(item.title)
        noListId.push(item.key)
        return item
      })
      // 过滤归属数据
      const yesList = res.data.yesList.map((item, index) => {
        item.key = String(item.title)
        item.title = String(item.title)
        yesListId.push(item.key)
        return item
      })
      // 数据源包含（已归属，未归属）
      this.dataSource = noList.concat(yesList)
      this.noListId = noListId // 未归属id
      this.yesListId = yesListId // 初始化归属id
    }).catch((res) => { console.log() })
  },
  methods: {
    renderItem (item) {
      const customLabel = (
        <span class="custom-item">
          {item.description}
        </span>
      )
      return {
        label: customLabel, // for displayed item
        value: item.title // for title and filter matching
      }
    },
    handleChange (targetKeys, direction, moveKeys) {
      this.yesListId = targetKeys
      if (direction === 'right') {
        // 减
        const filterNo = this.filterNoListId.map((item, index) => {
          if (!moveKeys.includes(item)) {
            return item
          }
        })
        this.filterNoListId = filterNo
      } else if (direction === 'left') {
        // 加
        const filterNo = moveKeys.map((item, index) => {
          if (!this.noListId.includes(item)) {
            return item
          }
        })
        this.filterNoListId = this.filterNoListId.concat(filterNo)
      }
    },
    handleSubmit () {
      return new Promise((resolve, reject) => {
        const orderRequest = {
          storesId: [this.storesId],
          noIds: this.filterNoListId, // 未归属信息
          yesIds: this.yesListId // 归属信息,
        }
        // 未归属房源信息
        // 归属房源信息
        saveHouseAttribution(orderRequest).then((res) => {
          resolve(res)
        }).catch((err) => {
          reject(err)
        })
      })
    }
  }
}
</script>
<style lang="less" scoped >
  .onershipDiv{
    .title{
      font-size:16px;
    }
  }
</style>
